<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div v-cloak id="app">
	<div>
		id：<input type="text" v-model="id">
		name：<input type="text" v-model="name">
		<input type="button" value="添加" @click="add">
	</div>
	<p v-for="item in list" :key="item.id">
		<input type="checkbox">{{ item.id }} --- {{ item.name }}
	</p>
</div>	
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el : '#app',
	data : {
		id : '',
		name : '',
		list:[
			{id:1, name:'张三'},
			{id:2, name:'李四'},
			{id:3, name:'王五'},
			{id:4, name:'赵六'}
		]
	},
	methods:{
		add(){
			// this.list.push({id:this.id, name:this.name})
			this.list.unshift({id:this.id, name:this.name})
		}
	}
})
</script>	
</body>
</html>